iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 21
0
Modern Web

少年學Vue,如隙中窺月系列 第 21

[Day21] jsES6語法-字串模板 Template String

  • 分享至 

  • xImage
  •  

如果我們要我們今天要再字串裡面加入值,就會需要使用到+號。常常我們如果要想要使用 innerHTML 來渲染變數,就會在變數裡面存放一大串的 html 結構,並且用+號將數值連起來,如果為了排版,我們還必須加上\ 來換行,這樣其實相當麻煩。

let dataArr = ['Peter','Merry','Leo'];
let text = '我叫做'+dataArr[0];
console.log(text);
let list = '<ul>\
<li>'+dataArr[0]+'</li>\
<li>'+dataArr[1]+'</li>\
<li>'+dataArr[2]+'</li>\
<ul>';

如果我們ES6 新的模板語法,就可以省去這些麻煩。我們可以直接使用模板語法,並且將想要打的標籤結構還有值輸入進''(是鍵盤1旁邊的符號,不是這個,因為如果使用它,it邦內建是反紅色的語法,所以打不出來)內,記得如果是值的呈現要加上${},才可以正確顯示出值來。

<body>
    <div id="content"></div> 
</body>
let dataArr = ['Peter','Merry','Leo'];
let text = `我叫做${dataArr[0]}`;
let list = `
		<ul>
       <li>${dataArr[0]}</li>
       <li>${dataArr[1]}</li>
       <li>${dataArr[2]}</li>
    <ul>
`;
document.getElementById('content').innerHTML=list;

上一篇
[Day20] jsES6語法-展開與其餘參數
下一篇
[Day22] jsES6語法-縮寫用法
系列文
少年學Vue,如隙中窺月30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言